<!-- 页面：空状态组件 | 时间：2025-01-17 -->
<template>
  <view class="empty-container">
    <view class="empty-image">
      <image :src="imageSrc" :alt="text" mode="aspectFit" class="empty-img" />
    </view>
    <view class="empty-text">
      {{ text }}
    </view>
    <slot name="action"></slot>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  text?: string;
  image?: string;
}

const props = withDefaults(defineProps<Props>(), {
  text: "暂无数据",
  image: "",
});

// 计算图片源路径
const imageSrc = computed(() => {
  return props.image || "/static/images/empty.png";
});
</script>

<style scoped lang="scss">
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  min-height: 400rpx;
}

.empty-image {
  margin-bottom: 32rpx;

  .empty-img {
    width: 360rpx;
    height: 200rpx;
  }
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 32rpx;
}
</style>
